import React from 'react';
import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import { NuiBt, is_empty } from 'sui';
import { is_fullscreen, full_screen } from './base';
import { loc } from 'local/index.js';

/*
 * value: [{
 *      label: "xx",
 *      name: "xx",
 *      hcmd:
 * }]
*/
const MainMenu = ({ value, open, setOpen, width="w-20", title=loc("base_118"), bfull=true, value_two, value_three }) => {
    const get_menu = (val) => {
        if (is_empty(val)) {
            return null;
        }

        return val.map(d => {
            const hdis = () => {
                if (d.show) {
                    return !d.show();
                }

                return false;
            };

            const getW = () => {
                if (d.w) {
                    return d.w;
                }

                return "w-40";
            };

            return <NuiBt disabled={hdis()} className={`h-16 mr-4 ${getW()}`} key={d.name} name={d.name} hcmd={() => {
                setOpen(false);
                d.hcmd();
            }}>{d.label}</NuiBt>
        });
    };

    const full_btn = () => {
        if (bfull) {
            return <NuiBt className="mr-4 w-40 h-16" hcmd={() => {
                setOpen(false);
                full_screen();
            }}>{is_fullscreen() ? loc("base_133") : loc("base_32")}</NuiBt>;
        }

        return null;
    };

    const getView = () => {
        return (
            <div className="flex flex-col">
                <div className="inline-flex flex-wrap">
                    {get_menu(value)}
                    {full_btn()}
                    <NuiBt className="w-40 h-16" color="green" hcmd={() => setOpen(false)}>{loc("base_36")}</NuiBt>
                </div>
            </div>
        );
    };

    const hclose = (event, reason) => {
        if (reason === "backdropClick") {
            return;
        }

        setOpen(false);
    };

    return (
        <>
            <NuiBt className={"h-16 " + width} hcmd={() => setOpen(true)}>{title}</NuiBt>
            <Dialog keepMounted disableEscapeKeyDown fullWidth={true} onClose={hclose} open={open} maxWidth="lg">
                <DialogTitle>{title}</DialogTitle>
                <div className="ml-4 mb-3">
                    {getView()}
                </div>
            </Dialog>
        </>
    );
};

export {MainMenu};
